<template>
	<view v-if="$hd.isLogin()">
		<hd-navbar :showHomeIcon="true" :showCartIcon="false" :showInput="false" :showUserIcon="true" title="用户结算" />
		<view class="mt-20">
			<view class="border-t-1 border-b-1 border-t-solid border-b-solid border-gray-100 py-20 px-20">
				收货地址
			</view>
			<view class="py-20 px-20">
				<view class="" v-if="address.length">
					<hd-address-select />
				</view>
				<view class="" v-else>
					<u-button type="success" @click="$hd.redirect(`/pages/address/add/add`)">设置收货地址</u-button>
				</view>
			</view>
		</view>

		<view class="mt-30">
			<uni-list>
				<uni-list-item v-for="(pay,index) in payTypes" :key="index">
					<template #header>
						<view class="flex items-center">
							<i class="iconfont text-lg mr-20" :class="pay.icon" :style="{color:pay.color}"
								style="font-size:50rpx;"></i> {{pay.title}}
						</view>
					</template>
					<template #footer>
						<u-radio-group v-model="type">
							<u-radio shape="circle" :name="pay.type"></u-radio>
						</u-radio-group>
					</template>
				</uni-list-item>
			</uni-list>
		</view>

		<view class="mt-30">
			<view class="" v-if="coupon">
				<view class="border-t-1 border-b-1 border-t-solid border-b-solid border-gray-100 py-20 px-20">
					优惠券
				</view>
				<view class="py-20 px-20">
					<hd-coupon-item :coupon="coupon">
						<button type="default" size="mini" @click="coupon=null">取消优惠券</button>
					</hd-coupon-item>
				</view>
			</view>

			<uni-list>
				<uni-list-item title="优惠券" link clickable @click="couponPopup=true" @select="couponPopup=false"
					v-if="!coupon" />
			</uni-list>
			<u-popup v-model="couponPopup" mode="bottom" :mask-close-able="true">
				<coupon-select @select="selectCoupon"></coupon-select>
				<button type="default" @click="couponPopup=false">取消选择</button>
			</u-popup>
		</view>

		<view class="bg-white flex flex-row h-50 items-stretch hd-cart-footer">
			<view class="flex-1 flex flex-col justify-center items-center">
				<view class="text-base flex flex-col items-center justify-center">
					<view class="text-base text-gray-500">
						共 <text class=""> {{cartGoodsTotalNumber(true)}} </text> 件
					</view>
					<view class="text-red-600 ">
						合计：<text class="font-bold">{{totalPrice}}</text>
					</view>
				</view>
			</view>
			<view class="bg-gray-200 flex-1 justify-center items-center flex text-gray-800 text-lg"
				@click="$hd.switchTab('/pages/cart/cart')">
				购物车
			</view>
			<view class="bg-red-500 flex-1 justify-center items-center flex text-white text-lg" @click="onSubmit">
				去付款
			</view>
		</view>
	</view>
</template>

<script>
	import payTypes from './payTypes.js'
	import couponSelect from './components/couponSelect.vue'
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		components: {
			//选择优惠券
			couponSelect
		},
		onLoad() {
			this.$hd.loginCheck()
		},
		data() {
			return {
				//支付类型
				payTypes,
				//选择的支付方式
				type: 'alipay',
				//优惠券弹出层
				couponPopup: false,
				//优惠券
				coupon: null,
				//后台生成的订单
				order: null
			}
		},
		computed: {
			...mapState('cart', {
				cart: state => state.cart,
			}),
			...mapState('user', ['wechatInfo']),
			...mapGetters('cart', {
				cartGoodsTotalPrice: 'totalPrice',
				cartGoodsTotalNumber: 'totalNumber'
			}),
			...mapState('address', ['currentAddress', 'address']),
			totalPrice() {
				let price = this.cartGoodsTotalPrice(true)
				if (this.coupon) {
					switch (this.coupon.type) {
						case 'fixed_price':
							price -= this.coupon.value
							break;
						case 'discount':
							price *= this.coupon.value
					}
				}
				return Math.round(price);
			}
		},
		methods: {
			//选择优惠券
			selectCoupon(coupon) {
				this.couponPopup = false
				this.coupon = coupon
			},
			//提交定单
			async onSubmit() {
				if (!this.currentAddress.id) {
					return uni.showToast({
						title: '请选择收货地址',
						duration: 2000
					});
				}
				this.order = await this.createOrder()
				this[this.type]();
			},
			//后台创建订单
			async createOrder() {
				return await this.$api.post(`member/order`, {
					goods: this.cart,
					coupon: this.coupon
				}).then(res => {
					//清空购物车
					return res.data;
				}).catch(e => {
					uni.showModal({
						title: '订单创建失败'
					})
				})
			},
			//发起支付
			async wepay() {
				const payInfo = await this.$api.post(`pay/${this.order.id}?client=miniapp&type=wepay`, {
					openid: this.wechatInfo.openid
				});
				uni.requestPayment({
					provider: 'wxpay',
					...payInfo,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/my/my'
						})
					},
					fail: function(err) {
						uni.showModal({
							title: '提示',
							content: '你可以在订单管理中心，继续完成支付',
							showCancel: false,
							success: function(res) {
								uni.reLaunch({
									url:'/pages/my/my'
								})
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	.hd-cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		border-top: solid 1px #999;
	}
</style>
